<template>
  <div class="timeline-item" @scroll="scrollEvent">
    <div v-for="item in list" :key="item.name">
      <div class="item-title hw-flex-style-c-c">
        <span>{{ item.name }}</span>
      </div>
      <t-timeline mode="same">
        <t-timeline-item v-for="items in item.logs" :key="items.id">
          <div class="hw-box-style-flex hw-box-style-flex-r-center" v-if="items.centerTitle">
            <span class="title1">{{ items.timeStr }}</span>
            <t-avatar size="28px" :image="urls + items.coverUrl + webUrls" v-if="items.coverUrl"> </t-avatar>
            <t-avatar size="28px" v-else> </t-avatar>
            <span class="title2">{{ items.userName }}</span>
            <span class="title3">{{ items.centerTitle }}</span>
            <span class="title4 hw-click-cursor" @click="pathtype(items.refType)">{{ items.refName }}</span>
            <span class="title5">{{ items.centerTitleright }}</span>
          </div>
          <div class="hw-box-style-flex hw-box-style-flex-r-center" v-else>
            <span class="title1">{{ items.createDate }}</span>
            <t-avatar size="28px" :image="urls + items.coverUrl + webUrls" v-if="items.coverUrl"> </t-avatar>
            <t-avatar size="28px" v-else> </t-avatar>
            <span class="title2">{{ items.userName }}</span>

            <span class="title4" @click="pathtype(items.refType)">{{ items.content }}</span>
          </div>
        </t-timeline-item>
      </t-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { projectLogs } from '@/api/project/project';
import { ref, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useProjectStore } from '@/store';

const webUrls: string = '?imageView2/1/w/28/h/28/format/webp';
const props = defineProps({
  seach: {
    type: String,
  },
});
const router = useRouter();
const store = useProjectStore();
const parmas = reactive({
  projectId: null,
  value: '',
  PageNo: 1,
  PageSize: 20,
});
const total = ref(0);
const list = ref([]);
const flag = ref(false);
const CommonStyle = {
  fontSize: '12px',
  color: 'rgba(0,0,0,.6)',
};
const init = async () => {
  try {
    parmas.projectId = store.projectInfo.projectId;
    let res = await projectLogs(parmas);
    total.value = Math.ceil(res.data.total / 20);
    res.data.data.forEach((ele) => {
      ele.logs.forEach((element) => {
        if (element.content.indexOf('{RefName}') !== -1) {
          let arr = element.content.split('{RefName}');
          element.centerTitle = arr[0]; //element.content.replace('{RefName}', '');
          element.centerTitleright = arr[1];
        }
      });
    });
    list.value = list.value.concat(res.data.data);
  } catch {}
};
const pathtype = (e: number) => {
  let pathName: String = '';
  switch (e) {
    case 2:
      pathName = '/prijectMenu/member';
      break;
    case 3:
      pathName = '/prijectMenu/administration';
      break;
    case 4:
      pathName = '/prijectMenu/exhibits';
      break;
    case 5:
      pathName = '/prijectMenu/plan';
      break;
  }

  router.push({ path: pathName, query: { projectId: localStorage.getItem('projectId') } });
};
const scrollEvent = (e) => {
  // 获取滚动时的高度
  const ele = e.srcElement ? e.srcElement : e.target;
  // 监听滚动到div底部
  if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 10) {
    // console.log('滚动到底l');
    // this.loading = true; //底部设置一个loading 开启加载动画
    if (flag.value === false && total.value > parmas.PageNo) {
      parmas.PageNo = parmas.PageNo + 1;
      init();
    }
  }
};
init();
watch(
  () => props.seach,
  () => {
    console.log('变化');
    parmas.PageNo = 1;
    parmas.value = props.seach;
    list.value = [];
    init();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.hw-box-style-flex {
  font-family: PingFangSC-Regular, PingFang SC;
}
.timeline-item {
  height: calc(100%);
  overflow-y: scroll;
  // overflow: hidden;
}
.title1 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 20px;
  margin-right: 12px;
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-left: 4px;
  margin-right: 8px;
}
.title3 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.title4 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 24px;
  margin: 0 8px;
}
.title5 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.item-title {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-radius: 4px;
  width: 158px;
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-bottom: 16px;
}
:deep(.t-timeline-item__wrapper .t-timeline-item__dot) {
  width: 8px;
  height: 8px;

  border: 2px solid #e62b17;
}
:deep(.t-timeline-item) {
  min-height: 66px;
}
:deep(.t-timeline-item__content) {
  // height: 66px;
  // padding-bottom: 10px;
}
</style>
